React Native এ Animations এবং Gestures

React Native-এ Animations এবং Gestures ব্যবহার করে অ্যাপ্লিকেশনকে আরো ইন্টারঅ্যাকটিভ এবং দৃষ্টিনন্দন করা যায়। এগুলি অ্যাপের ইউজার ইন্টারফেস (UI) এবং ইউজার অভিজ্ঞতা (UX) উন্নত করতে সাহায্য করে। React Native-এ বিভিন্ন ধরনের Animations এবং Gestures এর জন্য টুলস এবং লাইব্রেরি রয়েছে, যেমন React Native Animated API, React Native Gesture Handler, এবং Reanimated ইত্যাদি।

React Native Animations

Animation মূলত একটি গতি বা পরিবর্তন যা অ্যাপ্লিকেশনটির UI উপাদানগুলোর মধ্যে ঘটে। React Native-এ অ্যাপ্লিকেশনটির অ্যাকশন বা ট্রানজিশন আরো সজীব এবং ব্যবহারকারী বান্ধব করতে Animation ব্যবহার করা হয়।

১. Animated API

React Native-এ Animated API হল একটি পুঁজি যা বিভিন্ন ধরনের এনিমেশন তৈরি করার জন্য ব্যবহৃত হয়। এটি declarative animations তৈরি করতে সহায়ক এবং সহজে ইন্টারফেসের মধ্যে state পরিবর্তন করে এনিমেশন কন্ট্রোল করা যায়।

উদাহরণ:

import React, { useState } from 'react';
import { View, Text, Animated, Button } from 'react-native';

const App = () => {
  const [fadeAnim] = useState(new Animated.Value(0));  // Initial opacity value

  const fadeIn = () => {
    Animated.timing(fadeAnim, {
      toValue: 1, // End opacity
      duration: 2000, // Duration of the animation
      useNativeDriver: true,
    }).start();
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Animated.View style={{ opacity: fadeAnim }}>
        <Text style={{ fontSize: 24 }}>React Native Animation</Text>
      </Animated.View>
      <Button title="Fade In" onPress={fadeIn} />
    </View>
  );
};

export default App;

এখানে Animated.Value(0) দিয়ে এনিমেশন শুরু করা হয়েছে এবং পরে Animated.timing() মেথডের মাধ্যমে opacity প্রপার্টি পরিবর্তন করা হয়েছে।

২. Different Types of Animations:

• Fade In / Fade Out: উপাদানকে ধীরে ধীরে দৃশ্যমান বা অদৃশ্য করা।
• Scale (Zoom In / Zoom Out): উপাদানের আকার বাড়ানো বা কমানো।
• Slide (Move Up / Down): উপাদানটিকে এক স্থান থেকে অন্য স্থানে স্থানান্তরিত করা।
• Rotation: উপাদানটি ঘুরানো।

React Native Gestures

Gestures হল ইউজার ইন্টারফেসের অংশ হিসেবে ব্যবহারকারী দ্বারা করা শারীরিক ক্রিয়াকলাপ (যেমন টাচ, সুইপ, পিন্চ ইত্যাদি)। React Native-এ gestures সমর্থন করার জন্য React Native Gesture Handler লাইব্রেরি ব্যবহার করা হয়, যা মোবাইল অ্যাপ্লিকেশনের ইন্টারঅ্যাকশন এবং প্রতিক্রিয়া উন্নত করতে সাহায্য করে।

১. React Native Gesture Handler

React Native Gesture Handler লাইব্রেরি মোবাইল অ্যাপে টাচ ইভেন্টগুলো সহজে এবং শক্তিশালীভাবে পরিচালনা করতে সাহায্য করে। এটি tap, pan, pinch, swipe সহ বিভিন্ন ধরনের gestures এর জন্য সমর্থন প্রদান করে।

উদাহরণ: Swipe Gesture

import React from 'react';
import { View, Text } from 'react-native';
import { GestureHandlerRootView, PanGestureHandler } from 'react-native-gesture-handler';

const App = () => {
  const onGestureEvent = (event) => {
    console.log(event.nativeEvent.translationX);
  };

  return (
    <GestureHandlerRootView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <PanGestureHandler onGestureEvent={onGestureEvent}>
        <View
          style={{
            width: 200,
            height: 200,
            backgroundColor: 'skyblue',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text>Swipe Me!</Text>
        </View>
      </PanGestureHandler>
    </GestureHandlerRootView>
  );
};

export default App;

এখানে PanGestureHandler ব্যবহার করে টাচ ইভেন্টগুলি ট্র্যাক করা হচ্ছে এবং ব্যবহারকারীর স্ক্রীন স্লাইডিংয়ের সময় translationX মান রেকর্ড করা হচ্ছে।

২. Types of Gestures Supported by Gesture Handler:

• Tap Gesture: যখন ব্যবহারকারী কোনও উপাদানে ট্যাপ করে।
• Pan Gesture: স্ক্রীনে উপাদানটি টেনে নিয়ে যাওয়া।
• Pinch Gesture: দুটি আঙ্গুল দিয়ে স্ক্রীনটিকে বড় বা ছোট করা।
• Swipe Gesture: দ্রুত এক দিক থেকে অন্য দিক স্লাইড করা।
• Long Press Gesture: দীর্ঘ সময় ধরে একটি উপাদানে প্রেস করা।

Reanimated Library

React Native Reanimated লাইব্রেরি Animated API এর চেয়েও আরো শক্তিশালী এবং টিউনেবল এনিমেশন তৈরি করতে ব্যবহৃত হয়। এটি আপনাকে Declarative Animations তৈরি করতে দেয় এবং আরো complex animations কার্যকরভাবে পরিচালনা করার জন্য উন্নত native driver সমর্থন প্রদান করে।

Reanimated উদাহরণ:

import React from 'react';
import { View, Text } from 'react-native';
import Animated, { Easing } from 'react-native-reanimated';

const { Value, timing } = Animated;

const App = () => {
  const opacity = new Value(0);

  const fadeIn = () => {
    timing(opacity, {
      toValue: 1,
      duration: 2000,
      easing: Easing.linear,
    }).start();
  };

  React.useEffect(() => {
    fadeIn();
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Animated.View style={{ opacity }}>
        <Text style={{ fontSize: 24 }}>Reanimated Fade In</Text>
      </Animated.View>
    </View>
  );
};

export default App;

এখানে Reanimated লাইব্রেরি ব্যবহার করে timing এবং Easing ফাংশনগুলো দিয়ে এনিমেশন তৈরি করা হয়েছে, যা আরো নির্ভুল এবং স্মুথ এনিমেশন তৈরি করতে সহায়ক।

সারাংশ

• Animations এবং Gestures ব্যবহার করে আপনি React Native অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং দৃষ্টিনন্দন করতে পারেন।
• Animated API React Native এর মূল এনিমেশন টুল, যা দিয়ে আপনি ফেইড ইন, স্কেল, রোটেশন ইত্যাদি এনিমেশন তৈরি করতে পারেন।
• React Native Gesture Handler লাইব্রেরি ব্যবহার করে আপনি প্যান, সুইপ, পিনচ, ট্যাপ ইত্যাদি গেস্টার ট্র্যাক করতে পারেন।
• Reanimated লাইব্রেরি ব্যবহার করে আরো complex এনিমেশন এবং performance-oriented এনিমেশন তৈরি করা যায়।

এই প্রযুক্তিগুলির মাধ্যমে আপনি মোবাইল অ্যাপ্লিকেশনে আরও স্মুথ এবং ইন্টারঅ্যাকটিভ ইউজার অভিজ্ঞতা তৈরি করতে পারবেন।

React Native তে অ্যাপ্লিকেশনে অ্যানিমেশন যোগ করতে বিভিন্ন উপায়ে Animation API ব্যবহার করা যায়। React Native-এ স্ট্যান্ডার্ড অ্যানিমেশন API দুটি প্রধান অংশে বিভক্ত:

1. Animated API (ব্যবহারযোগ্য, বিশেষ করে সরল অ্যানিমেশনগুলির জন্য)
2. LayoutAnimation API (ডিফল্টে অ্যানিমেশন প্রয়োগ করতে সহজ)

এখানে, Animated API সম্পর্কে বেসিক ধারণা এবং কিভাবে এটি কাজ করে তা বিস্তারিতভাবে ব্যাখ্যা করা হবে।

Animated API Overview

React Native এর Animated API আপনাকে অ্যানিমেশন তৈরি করতে এবং নিয়ন্ত্রণ করতে সাহায্য করে। এটি অনেক ধরনের অ্যানিমেশন প্রদান করে, যেমন ডিগ্রী পরিবর্তন, স্কেলিং, পজিশনিং পরিবর্তন, এবং আরো অনেক কিছু।

Animated API ৩টি গুরুত্বপূর্ণ অংশ নিয়ে গঠিত:

1. Animated.Value - একটি অ্যানিমেটেড মান যা স্টেট বা স্ন্যাপশট রাখতে পারে।
2. Animated.timing() - একটি সময় নির্ধারিত অ্যানিমেশন তৈরি করতে ব্যবহৃত।
3. Animated.spring() - স্প্রিং ভিত্তিক অ্যানিমেশন তৈরি করে, যা বাউন্স এবং গতি সংক্রান্ত আচরণ সৃষ্টি করতে পারে।

Animated API দিয়ে বেসিক অ্যানিমেশন তৈরি

১. Animated.Value

Animated.Value একটি স্টেট বা মানের মতো কাজ করে যা অ্যানিমেশন প্রক্রিয়ার নিয়ন্ত্রণ করে। এটি সাধারণত শুরুতে একটি মান সেট করা হয় এবং পরে তা পরিবর্তিত হয়।

import React, { useRef, useEffect } from 'react';
import { View, Animated, Button } from 'react-native';

const MyComponent = () => {
  const animation = useRef(new Animated.Value(0)).current; // Animated value (initially 0)

  const startAnimation = () => {
    Animated.timing(animation, {
      toValue: 1, // Target value
      duration: 1000, // Duration of the animation in milliseconds
      useNativeDriver: true, // Optimization
    }).start(); // Starts the animation
  };

  return (
    <View>
      <Button title="Start Animation" onPress={startAnimation} />
      <Animated.View
        style={{
          opacity: animation, // Animated property (opacity)
          width: 100,
          height: 100,
          backgroundColor: 'blue',
        }}
      />
    </View>
  );
};

export default MyComponent;

ব্যাখ্যা:

• Animated.Value(0) দিয়ে একটি অ্যানিমেটেড মান তৈরি করা হয়েছে।
• Animated.timing() দিয়ে নির্দিষ্ট সময়ে মান পরিবর্তনের জন্য অ্যানিমেশন তৈরি করা হয়েছে।
• animation এর মান যখন 0 থেকে 1 হয়, তখন opacity 0 থেকে 1 পরিবর্তিত হবে এবং UI উপাদানটি আস্তে আস্তে দৃশ্যমান হবে।

২. Animated.timing()

Animated.timing() সময় ভিত্তিক অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। এটি একটি নির্দিষ্ট সময়ের মধ্যে উপাদানের মান পরিবর্তন করে।

import React, { useRef, useEffect } from 'react';
import { View, Animated, Button } from 'react-native';

const MyComponent = () => {
  const scale = useRef(new Animated.Value(1)).current; // Initial scale value

  const startAnimation = () => {
    Animated.timing(scale, {
      toValue: 2, // Scale the element to twice its size
      duration: 1000, // Animation duration in milliseconds
      useNativeDriver: true, // Optimize performance with native driver
    }).start(); // Start the animation
  };

  return (
    <View>
      <Button title="Scale Up" onPress={startAnimation} />
      <Animated.View
        style={{
          transform: [{ scale: scale }], // Apply scale transformation
          width: 100,
          height: 100,
          backgroundColor: 'green',
        }}
      />
    </View>
  );
};

export default MyComponent;

ব্যাখ্যা:

• scale একটি Animated.Value হিসেবে সেট করা হয়েছে।
• Animated.timing() দিয়ে scale প্রপার্টি এক্ষেত্রে ১ থেকে ২ পরিবর্তিত হচ্ছে, এবং transform ব্যবহার করে scale প্রপার্টি অ্যাপ্লাই করা হয়েছে।

৩. Animated.spring()

Animated.spring() একটি স্প্রিং-বেসড অ্যানিমেশন তৈরি করে, যেখানে অ্যানিমেশনটি আরো বouncy বা fluid মনে হয়, সাধারণত কিছু স্থিতিশীলতা সহ।

import React, { useRef } from 'react';
import { View, Animated, Button } from 'react-native';

const MyComponent = () => {
  const position = useRef(new Animated.Value(0)).current; // Initial position value

  const startSpringAnimation = () => {
    Animated.spring(position, {
      toValue: 200, // Target position
      friction: 5, // How much the spring resists
      tension: 50, // How strong the spring is
      useNativeDriver: true, // Optimizing performance
    }).start(); // Start the spring animation
  };

  return (
    <View>
      <Button title="Spring Animation" onPress={startSpringAnimation} />
      <Animated.View
        style={{
          transform: [{ translateX: position }], // Apply translation
          width: 100,
          height: 100,
          backgroundColor: 'red',
        }}
      />
    </View>
  );
};

export default MyComponent;

ব্যাখ্যা:

• position একটি Animated.Value হিসেবে প্রথমে 0 সেট করা হয়েছে।
• Animated.spring() ব্যবহার করে একটি স্প্রিং অ্যানিমেশন তৈরি করা হয়েছে, যা উপাদানটিকে translateX প্রপার্টির মাধ্যমে স্থানান্তরিত করে।

সম্ভাব্য আরও অ্যানিমেশন ফিচার

• Animated.parallel(): একাধিক অ্যানিমেশন একসাথে চালানোর জন্য ব্যবহৃত হয়।
• Animated.sequence(): একাধিক অ্যানিমেশন ধারাবাহিকভাবে চালানোর জন্য ব্যবহৃত হয়।
• Animated.delay(): অ্যানিমেশন শুরু হওয়ার আগে একটি নির্দিষ্ট সময়ের বিলম্ব যোগ করার জন্য ব্যবহৃত হয়।

সারাংশ

React Native এর Animated API ব্যবহার করে আপনি সহজেই অ্যানিমেশন তৈরি করতে পারেন। এতে Animated.Value, Animated.timing(), এবং Animated.spring() এর মতো কার্যকরী ফাংশন ব্যবহার করা হয় যা আপনাকে সময়ভিত্তিক বা স্প্রিং-বেসড অ্যানিমেশন তৈরিতে সহায়ক। এটি আপনাকে অ্যাপ্লিকেশনের মধ্যে ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় ইউআই তৈরি করতে সাহায্য করে।

React Native অ্যাপে layout animations এবং animated APIs ব্যবহার করে আপনি অত্যন্ত স্মুথ এবং ইন্টারঅ্যাকটিভ অ্যানিমেশন তৈরি করতে পারেন। Animated API আপনাকে বিভিন্ন ধরনের অ্যানিমেশন তৈরি করতে সাহায্য করে, যেমন ট্রান্সলেট, স্কেল, রোটেট, অপাসিটি পরিবর্তন এবং আরও অনেক কিছু। অন্যদিকে, Layout Animation আপনার অ্যাপের UI পরিবর্তন করার সময় একটি অ্যানিমেশন প্রয়োগ করতে ব্যবহৃত হয়। এই দুটি শক্তিশালী টুল আপনার অ্যাপের ব্যবহারকারীর অভিজ্ঞতা (UX) উন্নত করতে সহায়ক।

Animated API

React Native-এর Animated API আপনাকে অ্যাপের UI-তে একাধিক অ্যানিমেশন অ্যাপ্লাই করার সুযোগ দেয়। এটি React Native এর মূল অংশ এবং ব্যবহারকারীদের জন্য স্মুথ অ্যানিমেশন তৈরিতে সহায়তা করে। এই API এর মাধ্যমে আপনি UI কম্পোনেন্টের transform, opacity, scale, position ইত্যাদি পরিবর্তন করতে পারেন।

Animated API এর মূল উপাদান:

1. Animated.View, Animated.Text, Animated.Image: এই উপাদানগুলি Animated কম্পোনেন্ট হিসেবে ব্যবহৃত হয় এবং আপনাকে অ্যানিমেশন অ্যাপ্লাই করতে সহায়তা করে।
2. Animated.Value: এই ক্লাসটি একটি এনিমেটেড ভ্যালু তৈরি করে যেটি অ্যাপ্লিকেশন সাইজ, ট্রান্সলেশন, রোটেশন বা অন্যান্য অ্যানিমেশন ফিচারের জন্য ব্যবহার করা হয়।
3. Animated.timing(), Animated.spring(), Animated.decay(): এই মেথডগুলোর মাধ্যমে অ্যানিমেশন টাইমিং বা স্প্রিং এফেক্ট তৈরি করা হয়।

Animated API এর ব্যবহার উদাহরণ:

import React, { useState } from 'react';
import { View, Button, Animated } from 'react-native';

const AnimatedExample = () => {
  const [animationValue] = useState(new Animated.Value(0));

  const startAnimation = () => {
    Animated.timing(animationValue, {
      toValue: 1, // Ending value
      duration: 1000, // Duration of animation
      useNativeDriver: true, // For better performance
    }).start();
  };

  const animatedStyle = {
    opacity: animationValue,
    transform: [
      {
        scale: animationValue.interpolate({
          inputRange: [0, 1],
          outputRange: [0.5, 1], // Scale from 0.5 to 1
        }),
      },
    ],
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Animated.View style={[{ width: 100, height: 100, backgroundColor: 'blue' }, animatedStyle]} />
      <Button title="Start Animation" onPress={startAnimation} />
    </View>
  );
};

export default AnimatedExample;

এখানে, Animated.Value দিয়ে আমরা একটি অ্যানিমেটেড ভ্যালু তৈরি করেছি, এবং Animated.timing এর মাধ্যমে সেটি একটানা (0 থেকে 1) পরিবর্তিত হচ্ছে। অ্যানিমেশন স্টাইল opacity এবং scale পরিবর্তন করছে।

Animated API এর প্রধান ফিচার:

• Animated.Value: অ্যানিমেশনের মান নির্ধারণ করে এবং এটি সময়ের সাথে সাথে পরিবর্তিত হয়।
• Animated.timing(): টাইমিং অ্যানিমেশন প্রয়োগ করার জন্য ব্যবহৃত হয়।
• Animated.spring(): স্প্রিং বাউন্সি অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়।
• Animated.parallel(): একাধিক অ্যানিমেশন একসাথে চালানোর জন্য ব্যবহৃত হয়।
• Animated.sequence(): একাধিক অ্যানিমেশনকে একটি সিকোয়েন্সে চালানোর জন্য ব্যবহৃত হয়।

Layout Animation

Layout Animation React Native-এর একটি সহজ এবং শক্তিশালী API যা UI লেআউট পরিবর্তন করার সময় অ্যানিমেশন যোগ করার জন্য ব্যবহৃত হয়। এটি যখন আপনি কোনো ভিউ কম্পোনেন্টের সাইজ, পজিশন বা স্টাইল পরিবর্তন করতে চান তখন স্বয়ংক্রিয়ভাবে অ্যানিমেশন তৈরি করে।

Layout Animation সেটআপ:

React Native-এর LayoutAnimation API-এর মাধ্যমে আপনি স্বয়ংক্রিয়ভাবে layout changes-এর সাথে অ্যানিমেশন অ্যাপ্লাই করতে পারেন। এই অ্যানিমেশনটি সাধারণত View এর প্রপার্টি পরিবর্তনের সময় ব্যবহৃত হয় (যেমন: সাইজ পরিবর্তন, পজিশন পরিবর্তন ইত্যাদি)।

Layout Animation ব্যবহার করার উদাহরণ:

import React, { useState } from 'react';
import { View, Text, Button, LayoutAnimation, StyleSheet } from 'react-native';

const LayoutAnimationExample = () => {
  const [boxSize, setBoxSize] = useState(100);

  const animateBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring); // Spring animation preset
    setBoxSize(boxSize === 100 ? 200 : 100); // Toggle box size
  };

  return (
    <View style={styles.container}>
      <View style={[styles.box, { width: boxSize, height: boxSize }]} />
      <Button title="Animate Box" onPress={animateBox} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    backgroundColor: 'blue',
  },
});

export default LayoutAnimationExample;

এখানে LayoutAnimation.configureNext() ব্যবহার করে আমরা একটি spring animation সেট করেছি যা ভিউ কম্পোনেন্টের আকার পরিবর্তন করার সময় অ্যানিমেশন তৈরি করবে।

Layout Animation এর প্রধান ফিচার:

• LayoutAnimation.configureNext(): পরবর্তী লেআউট পরিবর্তন এর জন্য অ্যানিমেশন কনফিগার করতে ব্যবহৃত হয়।
• LayoutAnimation.Presets: এখানে বিভিন্ন ধরনের প্রিসেট অ্যানিমেশন আছে যেমন spring, easeInEaseOut, linear ইত্যাদি। আপনি আপনার প্রয়োজনে এটি নির্বাচন করতে পারেন।
• LayoutAnimation.create(): কাস্টম অ্যানিমেশন তৈরি করার জন্য ব্যবহার করা হয়।

Layout Animation ও Animated API এর মধ্যে পার্থক্য

সারাংশ

• Animated API: React Native অ্যাপে উন্নত এবং কাস্টম অ্যানিমেশন তৈরির জন্য ব্যবহৃত হয়। এটি অপাসিটি, স্কেল, রোটেশন, ট্রান্সলেট, ইত্যাদি এফেক্ট তৈরি করতে সাহায্য করে।
• Layout Animation: এটি UI লেআউট পরিবর্তনের সময় অ্যানিমেশন যোগ করার জন্য ব্যবহৃত হয় এবং React Native অ্যাপে স্বয়ংক্রিয়ভাবে অ্যানিমেশন তৈরি করে।

আপনার অ্যাপের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এই দুটি শক্তিশালী টুল ব্যবহার করা খুবই সহায়ক এবং এটি আপনার অ্যাপের ডিজাইন এবং ইউজার ইন্টারফেসকে স্মুথ এবং আকর্ষণীয় করে তুলবে।

React Native-এ Reanimated একটি শক্তিশালী লাইব্রেরি যা আপনাকে complex animations তৈরি করতে সহায়ক। এটি React Native এর জন্য উন্নত এবং উচ্চ-পারফরম্যান্স অ্যানিমেশন প্রদান করে, যা UI rendering এর পারফরম্যান্সে খুবই উন্নতি আনে। Reanimated-এর মাধ্যমে আপনি gesture-based animations, scroll-based animations, এবং complex sequence animations তৈরি করতে পারবেন।

React Native Reanimated 2 এর নতুন ফিচারগুলি, যেমন worklets, shared values, এবং hooks আপনাকে আরও বেশি নিয়ন্ত্রণ দিতে সহায়ক হয় এবং complex animations সহজেই তৈরি করা সম্ভব হয়।

React Native Reanimated 2 ইনস্টলেশন

Reanimated 2 ব্যবহার করতে হলে প্রথমে লাইব্রেরিটি ইনস্টল করতে হবে। এটি সহজেই npm বা yarn এর মাধ্যমে ইনস্টল করা যায়।

npm install react-native-reanimated

অথবা,

yarn add react-native-reanimated

Post-installation steps:

React Native 0.65 এবং তার পরবর্তী সংস্করণগুলির জন্য আপনাকে কিছু post-installation steps অনুসরণ করতে হবে। আপনি এই steps গুলি Reanimated official documentation থেকে পেতে পারেন।

React Native Reanimated 2 এর মূল ফিচারগুলি

1. Shared Values
   Shared values আপনাকে একাধিক worklets এর মধ্যে ডেটা শেয়ার করতে সহায়ক, যা একাধিক কম্পোনেন্টে একই অ্যনিমেশন কোড শেয়ার করতে সাহায্য করে।
2. Worklets
   Worklet হল একধরনের কোড ব্লক যা UI thread-এ রান করে এবং animation-এ real-time ফিডব্যাক দেয়। এটি অ্যাপের পারফরম্যান্সে বড় ধরনের সুবিধা প্রদান করে।
3. Animated Styles
   Reanimated আপনাকে animation-এর সময় styles পরিবর্তন করার অনুমতি দেয়। আপনি একাধিক স্টাইল ইফেক্ট ব্যবহার করে layout animation তৈরি করতে পারেন।
4. Gesture Handling
   Reanimated-এ gesture-based animations তৈরি করা সম্ভব, যেমন dragging বা swiping।

Complex Animation তৈরি করার উদাহরণ

এখানে একটি complex animation তৈরি করা হবে, যেখানে একটি বক্স স্ক্রীনে drag করা যাবে এবং সেটি স্ক্রীন সাইজ অনুযায়ী bounce করবে।

প্রথম উদাহরণ: Drag and Bounce Animation

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Animated, { Easing, useSharedValue, useAnimatedStyle, withSpring, withDelay, withRepeat } from 'react-native-reanimated';

const App = () => {
  const translateX = useSharedValue(0); // Shared value for translation

  // Animated style for drag animation
  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        { translateX: withSpring(translateX.value, { damping: 2, stiffness: 100 }) }, // Apply spring animation
      ],
    };
  });

  // Handling gesture event
  const onGestureEvent = (event) => {
    translateX.value = event.translationX; // Set translation value on drag
  };

  return (
    <View style={styles.container}>
      <Animated.View
        style={[styles.box, animatedStyle]} // Applying animated style
        onStartShouldSetResponder={() => true}
        onResponderMove={onGestureEvent} // Dragging event
      >
        <Text style={styles.text}>Drag Me!</Text>
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  box: {
    width: 150,
    height: 150,
    backgroundColor: 'skyblue',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 20,
  },
  text: {
    fontSize: 16,
    color: '#fff',
  },
});

export default App;

ব্যাখ্যা:

1. useSharedValue: এই হুক ব্যবহার করা হয়েছে translateX নামক একটি শেয়ারড ভ্যালু তৈরি করতে, যা কম্পোনেন্টের ভেতরে ডেটা শেয়ার করতে সহায়ক।
2. withSpring: translateX পরিবর্তন করার জন্য এটি একটি spring animation ব্যবহার করছে, যা বক্সটিকে সহজভাবে স্ক্রীনে চলন্ত অবস্থায় রাখে এবং শেষের দিকে "bounce" করায়।
3. onResponderMove: এই ইভেন্ট হ্যান্ডলার দিয়ে আপনি বক্সটিকে স্ক্রীনে ড্র্যাগ করতে পারবেন।

আরেকটি উদাহরণ: Sequence Animation (Fade In and Scale)

এখানে, একটি বক্স প্রথমে fade in হবে এবং তারপর scale up হবে।

import React, { useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Animated, { Easing, useSharedValue, useAnimatedStyle, withDelay, withSequence, withSpring } from 'react-native-reanimated';

const App = () => {
  const opacity = useSharedValue(0); // Starting opacity
  const scale = useSharedValue(0.5); // Starting scale

  useEffect(() => {
    // Sequence of animations
    opacity.value = withSequence(
      withDelay(500, withSpring(1, { damping: 2, stiffness: 100 })), // Fade In
      withSpring(0.8) // Scale animation after fade
    );
    scale.value = withSpring(1); // Scale to 1
  }, []);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: opacity.value,
      transform: [{ scale: scale.value }],
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, animatedStyle]}>
        <Text style={styles.text}>Fade and Scale Animation</Text>
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: 'coral',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 20,
  },
  text: {
    fontSize: 16,
    color: '#fff',
  },
});

export default App;

ব্যাখ্যা:

1. withSequence: এটি একাধিক অ্যানিমেশনকে সিরিয়ালি একে একে চালাতে ব্যবহৃত হয়। এখানে প্রথমে fade-in এবং পরে scale-up অ্যানিমেশন হয়েছে।
2. withDelay: এই ফাংশনটি একটি অ্যানিমেশন শুরু হওয়ার আগে কিছু বিলম্ব যোগ করে। এখানে, ৫০০ মিলিসেকেন্ডের বিলম্ব পরে অ্যানিমেশন শুরু হবে।

React Native Reanimated দিয়ে Complex Animations এর সুবিধা:

• High Performance: Reanimated UI থ্রেডে রান করে, ফলে অ্যানিমেশনগুলি স্মুথ এবং দ্রুত হয়।
• Flexibility: আপনি gesture-based অ্যানিমেশন, scroll-based অ্যানিমেশন, এবং sequence-based অ্যানিমেশন সহজেই তৈরি করতে পারবেন।
• Worklets: Worklets ব্যবহার করে আপনি UI থ্রেডে রান করার মতো কোড তৈরি করতে পারেন যা পারফরম্যান্সকে আরও ভালো করে তোলে।

সারাংশ

React Native Reanimated ব্যবহার করে আপনি অত্যন্ত complex animations তৈরি করতে পারবেন। এটি আপনাকে পারফরম্যান্সে উন্নতি এনে দেয় এবং রেসপন্সিভ এবং ইন্টারঅ্যাকটিভ অ্যানিমেশন তৈরি করতে সাহায্য করে। useSharedValue, useAnimatedStyle, এবং worklets ব্যবহার করে আপনি নিজের অ্যাপ্লিকেশনে বিভিন্ন ধরণের অ্যানিমেশন খুব সহজে এবং স্মুথলি প্রয়োগ করতে পারেন।

React Native এ Gesture Handler ব্যবহার করে আপনি Touch এবং Gestures ম্যানেজ করতে পারেন। React Native এর ডিফল্ট Touchable কম্পোনেন্টগুলো দিয়ে সীমাবদ্ধতা রয়েছে, যেমন অনেক ধরনের জেসচার সঠিকভাবে পরিচালনা করা কঠিন হতে পারে। কিন্তু react-native-gesture-handler প্যাকেজটি এসব সমস্যা সমাধান করে এবং শক্তিশালী জেসচার ম্যানেজমেন্টের সুবিধা প্রদান করে।

react-native-gesture-handler লাইব্রেরিটি বিভিন্ন ধরনের touch gestures যেমন swipes, pinches, taps, এবং dragging ইত্যাদি ম্যানেজ করার জন্য ব্যবহৃত হয়। এই প্যাকেজটি আরও উন্নত ইন্টারঅ্যাকশন তৈরি করতে সহায়ক।

React Native Gesture Handler সেটআপ

প্রথমে, আপনাকে react-native-gesture-handler প্যাকেজটি ইনস্টল করতে হবে।

npm install react-native-gesture-handler

ইনস্টলেশনের পরে, আপনাকে কিছু প্রাথমিক কনফিগারেশন করতে হতে পারে (যেমন MainActivity.java বা AppDelegate.m ফাইলের মধ্যে কিছু সেটআপ)। তবে এখন থেকে, আপনি gesture handler ব্যবহারের জন্য প্রস্তুত।

Gesture Handler এর কম্পোনেন্টস

React Native Gesture Handler কিছু কম্পোনেন্ট এবং API প্রদান করে যা touch events এবং gestures সহজে হ্যান্ডেল করতে সহায়ক।

১. TouchableWithoutFeedback

এটি একটি কম্পোনেন্ট যা ব্যবহারকারী যে কোনও ধরনের touch event যেমন tap বা press এর মাধ্যমে ইন্টারঅ্যাকশন করতে পারে।

import React from 'react';
import { Text, TouchableWithoutFeedback, View } from 'react-native';

const App = () => {
  const handlePress = () => {
    alert('Pressed!');
  };

  return (
    <TouchableWithoutFeedback onPress={handlePress}>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Press anywhere to trigger an action!</Text>
      </View>
    </TouchableWithoutFeedback>
  );
};

export default App;

২. PanGestureHandler

PanGestureHandler এর মাধ্যমে আপনি dragging gestures ম্যানেজ করতে পারেন, যেমন একটি ড্র্যাগ অপারেশন চালানো।

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';

const PanGestureExample = () => {
  const [translateX, setTranslateX] = useState(0);
  const [translateY, setTranslateY] = useState(0);

  const onGestureEvent = (event) => {
    setTranslateX(event.nativeEvent.translationX);
    setTranslateY(event.nativeEvent.translationY);
  };

  return (
    <PanGestureHandler onGestureEvent={onGestureEvent}>
      <View
        style={[
          styles.box,
          {
            transform: [{ translateX: translateX }, { translateY: translateY }],
          },
        ]}
      >
        <Text style={styles.text}>Drag me!</Text>
      </View>
    </PanGestureHandler>
  );
};

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'white',
    fontSize: 16,
  },
});

export default PanGestureExample;

৩. TapGestureHandler

TapGestureHandler ব্যবহার করে আপনি tap gestures যেমন একাধিক tap ইভেন্ট ম্যানেজ করতে পারেন।

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { TapGestureHandler } from 'react-native-gesture-handler';

const TapGestureExample = () => {
  const onTap = () => {
    alert('Tapped!');
  };

  return (
    <TapGestureHandler onActivated={onTap}>
      <View style={styles.button}>
        <Text style={styles.text}>Tap me!</Text>
      </View>
    </TapGestureHandler>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'green',
    padding: 20,
    borderRadius: 5,
  },
  text: {
    color: 'white',
    fontSize: 18,
  },
});

export default TapGestureExample;

৪. PinchGestureHandler

PinchGestureHandler ব্যবহার করে আপনি pinch gestures বা zoom ইভেন্ট ম্যানেজ করতে পারেন।

import React, { useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { PinchGestureHandler } from 'react-native-gesture-handler';

const PinchGestureExample = () => {
  const [scale, setScale] = useState(1);

  const onPinchEvent = (event) => {
    setScale(event.nativeEvent.scale);
  };

  return (
    <PinchGestureHandler onGestureEvent={onPinchEvent}>
      <View style={[styles.box, { transform: [{ scale: scale }] }]}>
        <Text style={styles.text}>Pinch to Zoom</Text>
      </View>
    </PinchGestureHandler>
  );
};

const styles = StyleSheet.create({
  box: {
    width: 200,
    height: 200,
    backgroundColor: 'orange',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'white',
    fontSize: 16,
  },
});

export default PinchGestureExample;

Gestures কাস্টমাইজেশন

React Native Gesture Handler আরও কাস্টমাইজেশন প্রদান করে যেমন:

• gestureState: Gesture Handler এর মাধ্যমে গেসচার স্টেট পরিচালনা করা, যাতে আপনি শুরু, চলমান এবং শেষ ইভেন্ট ট্র্যাক করতে পারেন।
• gestureHandlerProps: ডিফল্ট GestureHandler প্রপস গুলি যেমন onGestureEvent, onHandlerStateChange এবং enabled এর মাধ্যমে গেসচারদের কাস্টমাইজ করা।

সারাংশ

React Native Gesture Handler লাইব্রেরি touch gestures এবং gestures ব্যবস্থাপনা সহজ করে তোলে। এটি বিভিন্ন ধরনের gestures যেমন tap, swipe, drag, pinch, ইত্যাদি ব্যবস্থাপনা করতে সাহায্য করে, যা আপনার অ্যাপ্লিকেশনকে আরো ইন্টারেকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে।

• PanGestureHandler দিয়ে আপনি dragging gestures পরিচালনা করতে পারবেন।
• TapGestureHandler দিয়ে আপনি tap gestures ম্যানেজ করতে পারবেন।
• PinchGestureHandler দিয়ে আপনি zoom বা pinch gestures ম্যানেজ করতে পারবেন।

Gesture Handler React Native এ আরও উন্নত ও শক্তিশালী ইন্টারঅ্যাকশন তৈরি করতে সহায়ক।